<template>
  <div id="header">
    <div class="container">
      <div class="logo">
        <a href="javascript:;">
          <img src="@/assets/images/logo.png" alt="同福音乐 放厮听·趣玩乐" />
        </a>
      </div>
      <div class="header-left">
        <Menu
          :data="menuConfig"
          :currentIndex="currentMenuIndex"
          @cCurrentIndex="cCurrentIndex"
        ></Menu>
      </div>
      <div class="header-right">
        <div class="header-search">
          <!-- <selector placeholder="搜索歌曲、歌手、MV" :data="selectorData" @setItemValue="setItemValue"></selector> -->
          <div class="h-s-ipt">
            <input
              class="h-s-input"
              type="text"
              placeholder="搜索歌曲、歌手"
              @input="onSearchInput($event)"
            />
            <div class="btn-search" @click="onSearchClick">
              <span class="icon-search"></span>
            </div>
          </div>
        </div>
        <div class="header-user">
          <User :data="userData"></User>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import menuConfig from "@/configs/head/menu";
import userData from "@/data/head/user";
import selectorData from "@/data/head/selector";

import Menu from "@/components/Head/Menu";
import User from "@/components/Head/User/index";

import { useRouter } from "vue-router";
import utils from "@/libs/utils";
import { reactive, toRefs } from "vue";
export default {
  name: "Header",
  components: {
    Menu,
    User,
  },
  setup() {
    const state = reactive({
      currentMenuIndex: "/v1/home",
      CurInput: "",
    });

    const router = useRouter();
    window.onload = () => {
      let href = router.currentRoute.value.href;
      if (href) {
        utils.setSessionStorage("currentMenuIndex", href);
        state.currentMenuIndex = href;
      }
    };
    const setItemValue = (value) => {
      // console.log(value);
    };

    const cCurrentIndex = (index) => {
      state.currentMenuIndex = index;
    };

    const onSearchInput = (e) => {
      state.CurInput = e.target.value;
    };

    const onSearchClick = () => {
      // router.push({
      //   path: "/search",
      //   params: {
      //     name: state.CurInput,
      //   },
      // });
      window.location.href = "/search?name=" + state.CurInput;
    };

    return {
      ...toRefs(state),
      menuConfig,
      userData,
      selectorData,
      cCurrentIndex,
      setItemValue,
      onSearchInput,
      onSearchClick,
    };
  },
};
</script>

<style lang="scss" scoped>
#header {
  width: 100%;
  height: 70px;
  position: relative;
  z-index: 100;
  // margin-bottom: 70px;
  border-bottom: 1px solid #f5f5f8;

  // &::after {
  //   content: "";
  //   display: block;
  //   position: absolute;
  //   z-index: -1;
  //   top: 70px;
  //   width: 100%;
  //   height: 70px;
  //   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  //   border-top: 1px solid #f5f5f8;
  // }

  .logo,
  .header-left {
    float: left;
  }

  .header-left {
    margin-left: 50px;
  }

  .logo {
    img {
      margin: 21px 0;
    }
  }

  .header-right {
    float: right;
    height: 70px;
    line-height: 70px;

    .header-search {
      display: inline-block;
      vertical-align: middle;
      line-height: normal;

      .h-s-ipt {
        position: relative;
        width: 100%;
        height: 38px;
        .h-s-input {
          width: 100%;
          height: 100%;
          padding: 0 15px;
          box-sizing: border-box;
          background-color: #f2f2f2;
          border: 1px solid transparent;
          border-radius: 40px;
          outline: none;
          transition: all 0.2s linear;

          &:focus {
            border-color: $ThemeColor;
            box-shadow: 0 0 3px $ThemeColor;
          }
        }

        .btn-search {
          width: 36px;
          height: 36px;
          position: absolute;
          right: 2px;
          top: 1px;
          border-radius: 40px;
          text-align: center;
          background-color: #f2f2f2;
          line-height: 37px;

          .icon-search {
            width: 12px;
            height: 12px;
            display: inline-block;
            border: 2px solid #999;
            border-radius: 50%;
            position: relative;
            cursor: pointer;

            &::before {
              content: "";
              width: 8px;
              height: 2px;
              border-width: 0;
              background-color: #999;
              position: absolute;
              left: 9px;
              bottom: -4px;
              transform: rotate(45deg);
            }

            &:hover {
              border: 2px solid $ThemeColor;

              &::before {
                background-color: $ThemeColor;
              }
            }
          }
        }
      }
    }

    .header-user {
      vertical-align: middle;
      display: inline-block;
      margin-left: 20px;
      line-height: normal;
    }
  }
}
</style>
